import FontAwesome from "@expo/vector-icons/FontAwesome";
import { DarkTheme, DefaultTheme, ThemeProvider, useTheme } from "@react-navigation/native";
import { useFonts } from "expo-font";
import { SplashScreen, Stack } from "expo-router";
import { useEffect } from "react";
import { useColorScheme } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import store, { persistor } from "../store/store";
// import { store } from "../store/store";
import * as Updates from "expo-updates";
// import useDynamicColorScheme from '@hooks/useDynamicColorScheme'

import Colors from "@constants/Colors";
import "../i18n";

export {
    // Catch any errors thrown by the Layout component.
    ErrorBoundary,
} from "expo-router";

export const unstable_settings = {
    // Ensure that reloading on `/modal` keeps a back button present.
    initialRouteName: "(tabs)",
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
    // const [loaded, error] = useFonts({
    //     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    //     ...FontAwesome.font,
    // });

    const [loaded, error] = useFonts({
        "SpaceMono": require("../assets/fonts/SpaceMono-Regular.ttf"),
        "mon": require("../assets/fonts/Montserrat-Regular.ttf"),
        "mon-sb": require("../assets/fonts/Montserrat-SemiBold.ttf"),
        "mon-b": require("../assets/fonts/Montserrat-Bold.ttf"),
        ...FontAwesome.font,
    });

    // Expo Router uses Error Boundaries to catch errors in the navigation tree.
    useEffect(() => {
        if (error) throw error;
    }, [error]);

    useEffect(() => {
        if (loaded) {
            SplashScreen.hideAsync();
        }
    }, [loaded]);

    if (!loaded) {
        return null;
    }

    useEffect(() => {
        async function updateApp() {
            try {
                const update = await Updates.checkForUpdateAsync();
                if (update.isAvailable) {
                    await Updates.fetchUpdateAsync();
                    // 强制应用重新加载以应用更新
                    Updates.reloadAsync();
                }
            } catch (e) {
                // 在实际应用中，你应该处理错误情况
                console.error(e);
            }
        }

        updateApp();
    }, []);

    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <RootLayoutNav />
            </PersistGate>
        </Provider>
    );
}

function RootLayoutNav() {
    const colorScheme = useColorScheme();
    const { colors } = useTheme();
    // const { theme, getTheme, toggleTheme } = useDynamicColorScheme();

    return (
        <ThemeProvider value={colorScheme === "dark" ? { dark: false, colors: Colors.dark } : { dark: true, colors: Colors.light }}>
            <Stack screenOptions={{}}>
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen name="(auth)" options={{ headerShown: false, presentation: "modal", animation: "fade" }} />
                {/* <Stack.Screen name="modals/booking" options={{ animation: 'fade_from_bottom' }} /> */}
                {/* <Stack.Screen name="modal" options={{ presentation: "modal", animation: 'fade_from_bottom' }} /> */}
            </Stack>
        </ThemeProvider>
    );
}
